<style>
    .bookimage img{
        width:100%;
    }
    .booktitle{
        margin-top:20px;
    }
    .bookmemo{
        margin:30px;
        width:100%;
    }
</style>
<div *ngIf="bookBasic" class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="row">
                <div class="col-12 booktitle">
                    <h4 class="display-4" style="font-size:200%;">{{bookBasic.bookName}}<span *ngIf="bookBasic.foreignLanguageName&&bookBasic.foreignLanguageName.length>0">({{bookBasic.foreignLanguageName}})</span></h4>
                </div>
            </div>
            <div class="row">
                <div class="col-6 bookimage">
                    <img *ngIf="bookBasic.cover&&bookBasic.cover.length>0" src='{{"data:image/png;base64,"+bookBasic.cover}}'/>
                    <img *ngIf="!bookBasic.cover||bookBasic.cover.length==0" src='../../../content/images/nocover.png'/>
                </div>
                <div class="col-6 bookinfo">
                    <ul class="list-group">
                        <li class="list-group-item">作者：{{bookBasic.author}}</li>
                        <li class="list-group-item">翻译：{{bookBasic.translator}}</li>
                        <li class="list-group-item">出版社：{{bookBasic.press}}</li>
                        <li class="list-group-item">页码：{{bookBasic.paginalNumber}}</li>
                        <li class="list-group-item">语言：{{bookBasic.language}}</li>
                        <li class="list-group-item">纸张大小：{{bookBasic.folio}}&nbsp;</li>
                        <li class="list-group-item">ISBN：{{bookBasic.isbn}}</li>
                        <li class="list-group-item">书本大小：{{bookBasic.bookSize}} </li>
                        <li class="list-group-item">价格：{{bookBasic.price}}¥</li>
                    </ul>
                    <div class="row justify-content-left" style="margin-top:20px;">
                        <span>数量：</span>
                        <input style="width:50px;" type="number" min="0" [(ngModel)]="shopcartamount">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button *jhiHasAnyAuthority="'ROLE_USER'" class="btn btn-info" style="text-align: center" (click)="addtoshopcart(bookBasic)">
                            <span class="fa fa-plus"></span>
                            <span class="d-none d-md-inline">加入购物车 </span>
                        </button>

                    </div>

                </div>
            </div>
            <div class="bookmemo" *ngIf="bookBasic.introduction">
                <h5>简介</h5>
                <p class="lead">{{bookBasic.introduction}}</p>
            </div>

            <div class="bookmemo" *ngIf="bookBasic.perface">
                <h5>前言</h5>
                <p class="lead">{{bookBasic.perface}}</p>
            </div>

           <div class="bookmemo">
                <h5 >评论</h5>
               <div *ngFor="let item of comment ">
                <hr>
                <dl >
                    <dt><span>{{item.comment}}</span></dt>
                    <dd>{{item.content}}</dd>
                    <dd>{{item.commentTime}}</dd>

                </dl>
               </div>
            </div>
            <div class="bookmemo">
                <textarea style="width:100%" rows="10" placeholder="我来说两句（600字以内）" [(ngModel)]="inputValue"
                ></textarea>
                <button type="button" class="btn btn-success" (click)="save()">发表</button>

            </div>

        </div>
    </div>
</div>

